import 'package:al_pay_flutter/pages/common_widget/bottom_clipper.dart';
import 'package:flutter/material.dart';
import 'package:al_pay_flutter/pages/common_widget/my_appbar.dart';
import 'package:al_pay_flutter/pages/untils/screen.dart';

import 'finance_chart_page.dart';

class FinancePage extends StatefulWidget {
  @override
  _FinancePageState createState() => _FinancePageState();
}

class _FinancePageState extends State<FinancePage> {
  bool open = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: myAppBar(context, leftText: '  基金', action: [
        IconButton(
          icon: Icon(IconData(0xe709, fontFamily: 'iconfont')),
          onPressed: () {},
        )
      ]),
      body: ConstrainedBox(
        constraints: BoxConstraints.expand(),
        child: Stack(
          children: <Widget>[
            Container(
              child: ClipPath(
                //路径裁切组件
                clipper: BottomClipper(), //路径
                child: Container(
                  color: Theme.of(context).primaryColor,
                  height: 248.0,
                  // child: head(),
                ),
              ),
            ),
            head(),
          ],
        ),
      ),
      // body: LineCharts(),
    );
  }

  Widget myBody(BuildContext context) {
    return Column(
      children: <Widget>[listTap(), finacingList()],
    );
  }

  toFinanceChartPage() {
    Navigator.push(context, MaterialPageRoute(builder: (_) {
      return FinanceChartPage();
    }));
  }

  Widget finacingList() {
    List finacingListdata = [
      {
        'name': '招商中证白酒指数(LOF)',
        'yesterdayReturn': 2342,
        'myFinacing': '6,362,342.23',
        'return': '243,890.9',
        'returnRate': 0.02,
        'news': '市场异动点评'
      },
      {
        'name': '南方人工智能主体混合',
        'yesterdayReturn': 2342,
        'myFinacing': '591,212.1',
        'return': 2300.1,
        'returnRate': 0.02,
      },
      {
        'name': '易方达蓝筹精选混合',
        'yesterdayReturn': 2342,
        'myFinacing': '301,212.23',
        'return': 60313.2,
        'returnRate': 0.223,
        'news': '市场解读  突遭“暴风雨”我们能做什么？'
      },
      {
        'name': '易方达消费行业股票',
        'yesterdayReturn': 2342,
        'myFinacing': '531,212.17',
        'return': 172300,
        'returnRate': 0.0219,
      },
      {
        'name': '南方人工智能主体混合',
        'yesterdayReturn': 2342,
        'myFinacing': '31,212.42',
        'return': 2300,
        'returnRate': 0.02,
        'news': '市场解读  突遭“暴风雨”我们能做什么？'
      },
      {
        'name': '南方人工智能主体混合',
        'yesterdayReturn': 2342,
        'myFinacing': 31212,
        'return': 2300,
        'returnRate': 0.02,
        'news': '市场解读  突遭“暴风雨”我们能做什么？'
      },
      {
        'name': '南方人工智能主体混合',
        'yesterdayReturn': 2342,
        'myFinacing': 31212,
        'return': 2300,
        'returnRate': 0.02,
        'news': '市场解读  突遭“暴风雨”我们能做什么？'
      },
    ];
    int i = 0;
    return Column(
      children: finacingListdata.map((item) {
        i++;
        return cardBox(
            child: GestureDetector(
              child: Container(
                decoration: BoxDecoration(
                    border: Border(
                        bottom: BorderSide(width: 0.5, color: Colors.black12))),
                child: Column(
                  children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Container(
                          constraints: BoxConstraints(maxWidth: 135),
                          child: Column(
                            children: <Widget>[
                              Text(
                                item['name'],
                                style: TextStyle(
                                  fontSize: 30.w,
                                ),
                              ),
                            ],
                          ),
                        ),
                        Container(
                            child: Column(
                          children: <Widget>[
                            Text(open ? item['myFinacing'].toString() : '****',
                                style: TextStyle(fontSize: 30.w, height: 1.4)),
                            Text(
                                open
                                    ? (item['yesterdayReturn'] > 0
                                            ? '+'
                                            : '-') +
                                        item['yesterdayReturn'].toString()
                                    : '****',
                                style: TextStyle(
                                  height: 1.4,
                                  color: item['yesterdayReturn'] > 0
                                      ? open ? Colors.red : Colors.black87
                                      : Colors.grey,
                                )),
                          ],
                        )),
                        Container(
                            child: Column(
                          children: <Widget>[
                            Text(open ? item['return'].toString() : "***",
                                style: TextStyle(
                                  fontSize: 30.w,
                                  height: 1.4,
                                  color: item['returnRate'] > 0
                                      ? open ? Colors.red : Colors.black87
                                      : Colors.grey,
                                )),
                            Text(
                              open
                                  ? (item['returnRate'] > 0 ? '+' : '-') +
                                      (item['returnRate'] * 100).toString() +
                                      '%'
                                  : "***",
                              style: TextStyle(
                                height: 1.4,
                                color: item['returnRate'] > 0
                                    ? open ? Colors.red : Colors.black87
                                    : Colors.grey,
                              ),
                            ),
                          ],
                        )),
                      ],
                    ),
                    item['news'] != null
                        ? Container(
                            margin: EdgeInsets.only(top: 16),
                            padding:
                                EdgeInsets.only(left: 8, top: 4, bottom: 4),
                            decoration: BoxDecoration(
                                color: Color.fromRGBO(0, 0, 0, 0.05),
                                borderRadius: BorderRadius.circular(4)),
                            child: Row(
                              children: <Widget>[
                                Icon(
                                  IconData(
                                    0xe611,
                                    fontFamily: 'iconfont',
                                  ),
                                  color: Theme.of(context).primaryColor,
                                  size: 12,
                                ),
                                Text(
                                  ' ' + item['news'],
                                  style: TextStyle(
                                      fontSize: 24.w, color: Colors.black38),
                                )
                              ],
                            ),
                          )
                        : Text('')
                  ],
                ),
              ),
              onTap: toFinanceChartPage,
            ),
            magrgin: EdgeInsets.only(bottom: 0),
            padding: EdgeInsets.only(left: 16, right: 16, top: 16),
            borderRadius: BorderRadius.zero,
            height: item['news'] != null ? 126 : 86);
      }).toList(),
    );
  }

  Widget listTap() {
    return Column(children: <Widget>[
      cardBox(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text(
                    '我的持有',
                    style: TextStyle(
                        color: Colors.black87, fontWeight: FontWeight.w500),
                  ),
                  Expanded(
                    child: Text(''),
                  ),
                  Text(
                    '持有收益率排序',
                    style: TextStyle(color: Colors.black54),
                  ),
                  Icon(
                    IconData(
                      0xe699,
                      fontFamily: 'iconfont',
                    ),
                    color: Colors.grey,
                    size: 12,
                  ),
                  Container(
                    child: Text('顺序'),
                    margin: EdgeInsets.only(left: 8),
                    padding: EdgeInsets.all(4),
                    decoration: BoxDecoration(
                        border: Border(
                            left: BorderSide(width: 0.5, color: Colors.grey))),
                  )
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: ['名称', '金额/昨日收益', '持有收益/率']
                    .map((e) => Text(
                          e,
                          style: TextStyle(color: Colors.grey, fontSize: 24.w),
                        ))
                    .toList(),
              ),
              Divider(
                color: Colors.black12,
                height: 1,
              )
            ],
          ),
          magrgin: EdgeInsets.only(top: 8),
          padding: EdgeInsets.only(left: 16, right: 16, bottom: 8, top: 16),
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(4.0), topRight: Radius.circular(4.0))),
    ]);
  }

  Widget head() {
    return ListView(
      children: <Widget>[
        Row(
          children: <Widget>[
            Text(
              '总金额（元）',
              style: TextStyle(fontSize: 28.w, color: Colors.white60),
            ),
            IconButton(
              padding: EdgeInsets.only(top: 4),
              icon: Icon(
                IconData(open ? 0xe61c : 0xe6cf, fontFamily: 'iconfont'),
                color: Colors.white,
                size: 40.w,
              ),
              onPressed: () {
                setState(() {
                  open = !open;
                });
              },
            ),
          ],
          mainAxisAlignment: MainAxisAlignment.center,
        ),
        Center(
          child: Text(
            open ? '13,151,079.47' : '****',
            style: TextStyle(fontSize: 68.w, color: Colors.white),
          ),
        ),
        Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              conmonbox(
                title: '昨日收益(元)',
                money: '+2339.9',
                crossAxisAlignment: CrossAxisAlignment.start,
              ),
              conmonbox(
                  title: '持有收益(元)',
                  money: 2339.9 > 0 ? '+2,345.2' : '-2,125.9'),
              conmonbox(
                title: '累计收益(元)',
                money: '+12,345.2',
              )
            ],
          ),
          padding: EdgeInsets.only(left: 32.0, right: 32, top: 2),
        ),
        cardBox(
          child: GridView.count(
            //水平子Widget之间间距
            // crossAxisSpacing: 10.0,
            //垂直子Widget之间间距
            // mainAxisSpacing: 30.0,
            //GridView内边距
            // padding: EdgeInsets.all(10.0),
            //一行的Widget数量
            crossAxisCount: 4,
            //子Widget宽高比例
            // childAspectRatio: 2.0,
            //子Widget列表
            children: getWidgetList(context),
          ),
        ),
        myBody(context),
      ],
    );
  }

  Widget cardBox(
      {Widget child,
      double height,
      EdgeInsetsGeometry padding,
      magrgin,
      border,
      borderRadius}) {
    return Container(
        child: child,
        width: 750.w - 32,
        height: height ?? 86,
        margin: magrgin ?? EdgeInsets.all(16),
        padding: padding ??
            EdgeInsets.symmetric(
              vertical: 16,
            ),
        decoration: BoxDecoration(
          border: border,
          borderRadius: borderRadius ?? BorderRadius.circular(6),
          color: Colors.white,
        ));
  }

  Widget conmonbox(
      {String title, String money, CrossAxisAlignment crossAxisAlignment}) {
    return Column(
      children: <Widget>[
        Text(
          title ?? '',
          style: TextStyle(fontSize: 28.w, color: Colors.white60),
        ),
        Text(
          open ? money ?? '0' : '****',
          style: TextStyle(fontSize: 36.w, color: Colors.white, height: 1.6),
        )
      ],
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: crossAxisAlignment ?? CrossAxisAlignment.center,
    );
  }

  List<Widget> getWidgetList(BuildContext context) {
    final config = [
      {
        'icon': 0xe68d,
        'event': () {},
        'title': '收益明细',
      },
      {
        'icon': 0xe60e,
        'event': () {},
        'title': '交易记录',
      },
      {
        'icon': 0xe6ce,
        'event': () {},
        'title': '我的定投',
      },
      {
        'icon': 0xe8ee,
        'event': () {},
        'title': '专项计划',
      },
    ];
    return config
        .map(
          (e) => GestureDetector(
            child: Column(
              children: <Widget>[
                Icon(
                  IconData(e['icon'], fontFamily: 'iconfont'),
                  color: Theme.of(context).primaryColor,
                ),
                Container(
                  child: Text(
                    e['title'],
                    style: TextStyle(color: Colors.black87),
                  ),
                  padding: EdgeInsets.only(top: 6),
                )
              ],
            ),
            onTap: e['event'],
          ),
        )
        .toList();
  }
}
